<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../image/pic.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="footer.html">
    <link rel="stylesheet" href="../css/header.css">
    <!-- <link rel="stylesheet" href="../css/bootstrap.min.css"> -->
    <title>购物车</title>
    <style>
        iframe{
            display: block;
            width: 100%;
            height: 183px;
        }
        .logo img{
            margin: 20px 0 20px 214px;
        }
        .shop{
            width: 1090px;
            margin: 0 auto;
        }
        .sign li,.nav li{line-height: 31px;}
        .wuping{
            width: 1090px;
            height: 121px; 
            display: flex;
            justify-content: space-around;
            align-items: center;  
            border: 1px solid #e3e3e3; 
        }
        .cost,.xiaoji{font-size: 700;width: 60px;}
        .count{text-align: center; width: 120px;border: 1px solid #888;display: flex;justify-content: space-around;}
        .jian, .jia{display: block;width: 25px;text-align: center;cursor: pointer;}
        .jiliang{width: 70px; border-left: 1px solid #888;border-right: 1px solid #888}
        .bott span{width: 60px;display:inline-block;text-align: center; color: rgb(200, 0, 0);font-size: 18px;font-weight: 700;}
        .bott{width: 100%;height: 100px;}
        .bott p {height: 100px;line-height: 100px;}
        .form-group{width: 500px;float: right;}
        select{font-size: 12px;width: 130px;}
        label{font-size: 14px;font-weight: 600;}
        h4 p{font-weight: 600; float: left;}
        h4{height: 35px;line-height: 35px;}
        .none{display: none;width: 100%;height: 300px;line-height: 300px;text-align: center;font-size: 20px;color: red;}
        .before{width: 35%;}
        .intro{
            line-height: 22px;
            width: 250px;
            color: #333;
            font-size: 14px;
            font-weight: 700;
            margin: 30px 0 0 5px;
            overflow: hidden;
            /* white-space: nowrap;
            text-overflow: ellipsis; */
        }
        .photopec {height:121px;}
        .photopec img{height: 100%;}
        .other ul{
            width: 1012px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .other ul li{
            width: 19%;
            height: 284px;
            border: 1px solid #999;
            float: left;
            margin-left: 8px;
            margin-bottom: 12px;
        }
        .other ul li .photo img{width: 100%;cursor: pointer;}
        
        .danjia{
            font-size: 20px;
            margin-left: 20px;
            margin-top: 20px;
            font-weight: 700;
            color: rgb(180, 0,0);
        }
        .sell{height: 60px;}
        .order{width: 180px;height: 50px;font-size: 18px;font-weight: 600;cursor: pointer;margin: 20px 0 19px 20px; color: #fff; background-color: #e42542;text-align:center;line-height:50px;}
        .other ul li span img{width: 30px;height: 30px;cursor: pointer; margin-right: 20px;margin-top: 15px;}
    </style>
</head>
<body>
    <header>
        <div class="top">
            <div class="sign">
                <ul>
                    <li>考拉欢迎你！</li>
                    <li>
                        <a href="#">登录</a>
                    </li>
                    <li>
                        <a href="#">注册</a>
                    </li>
                    <li>手机考拉</li>
                </ul>
            </div>
            <div class="nav r">
                <ul>
                    <li>每日签到</li>
                    <li>我的订单</li>
                    <li>个人中心</li>
                    <li>客户服务</li>
                    <li>充值中心</li>
                    <li>消费者权益</li>
                    <li>更多</li>
                    <li>视频内容</li>
                </ul>
            </div>
        </div>
    </header>

    <div class="logo">
        <img src="../image/logo.png" alt="">
    </div>

    <div class="shop">
        <div class="none">
            购物车空空如也，快去商城逛逛吧~
        </div>
        <div class="hide">
            <h4>
                <p>我的购物车</p>  
                <div class="form-group">
                    <label for="newCity">所在城市</label>
                    <select name="" id="province"></select>
                    <select name="" id="city"></select>
                    <select name="" id="area"></select>
                </div>
            </h4>
            <div class="wuping">
                <div class="before">
                    
                    <div class="photopec l">
                    </div>
                    <p class="intro l"></p>
                </div>
                
                <span class="cost">880</span>
                <p class="count">
                    <span class="jian">-</span>
                    <span class="jiliang">1</span>
                    <span class="jia">+</span>
                </p>
                <p class="xiaoji"></p>
                <span class="del">删除</span>
            </div>
            <div class="bott">
                <p class="r">总价(不含运费) <span>￥</span>元</p>
                <p class="r">已选中商品<span>1</span>件</p>
            </div>
            <div class="sell">
                <h5 class="order r">去结算</h5>
            </div>
        </div>
        
        <div class="other">
            <h4>
                <p>其他商品</p>
            </h4>
            <ul>
                <li id="template">
                    <div class="photo"><img src="../image/details1.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details2.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details3.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details4.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details5.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details6.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details7.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details8.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details9.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details10.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details11.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details12.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details13.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details14.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
                <li id="template">
                    <div class="photo"><img src="../image/details15.jpg"></div>
                    <h5 class="introduce"></h5>
                    <h6 class="danjia l"></h6>
                    <span><img class="r" src="../image/xiaocheche.png"></span>
                </li>
            </ul>
        </div>
    </div>
    
    <iframe src="footer.html" frameborder="0" scrolling="no"></iframe>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/city.js"></script>
    <script>

        var ad = location.href.split("=")[1];
        console.log(ad)
        $.ajax({
                url:`http://127.0.0.1:82/shop?ad=${ad}`,
                success(data){
                    data = JSON.parse(data)
                    $(".intro").html(data[0].introduce)
                    $(".cost").html(data[0].pirce)
                    $(".xiaoji").html(data[0].pirce)
                    $(".photopec").html(`<img src="../image/details${ad}.jpg">`);
                    $(".bott p:nth-child(1) span").html($(".xiaoji").html())
                }
            })

        //省市区三级联动

        //获取省市区下拉菜单元素
        let province = $("#province");
        let city = $("#city");
        let area = $("#area");
            citys.forEach(item =>{
                let option = $(`<option>${item.provinceName}</option>`);
                province.append(option);
            })

        //给省绑定改变事件
        province.change(function(){
            // province.val("");
            //先清空原来的数据 
            city.empty();
            area.empty();
            cityList = citys[this.selectedIndex].mallCityList;
            //更新城市中的选择项
            cityList.forEach(item => {
                let option = $(`<option>${item.cityName}</option>`);
                city.append(option);
            });

            cityList[0].mallAreaList.forEach(item=>{
                let option = $(`<option>${item.areaName}</option>`)
                area.append(option)
            })
        })

        //给市绑定改变事件
        city.change(function(){
            area.empty();   //将选中的区先清空
            let areaList = cityList[this.selectedIndex].mallAreaList;
            // 更新区中的选择项
            areaList.forEach(item=>{
                let option = $(`<option>${item.areaName}</option>`)
                area.append(option)
            })
        })
        //商品数量变化
        let sum = 0;
        //加号减号中 小计 与总计 的函数
        function subtotal(){
            $(".jiliang").html(sum)
            //小计
            $(".xiaoji").html(Number($(".jiliang").html())*Number($(".cost").html()))    
            $(".bott p:nth-child(2) span").html(sum)
            $(".bott p:nth-child(1) span").html($(".xiaoji").html())
        }   
        $(".count .jia").click(function(){
            sum++
            subtotal();
        })
        $(".count .jian").click(function(){
            if(sum===0){
                return
            }
            sum--
            subtotal()
        })
        
        //删除
        $(".del").click(function(){
            $(".hide").hide();
            $(".none").show();
        })
        //去结算
        $(".order").click(function(){
            location.href = `http://127.0.0.1:82/html/order.html?ad=${ad}`;
        })
    </script>   
</body>
</html>

<!-- 
    写小计的时候将html(sum)写到了外面，此时它是一个定值，因为全局变量一定
 -->